import React, { Component } from 'react';
import PropTypes from 'prop-types';

// 假设，这是小明创建的 List 组件或者说你安装的一个第三方库
const List = (props) => {
  const arr = props.colors;
  const list = arr.map((item, index) => <li key={index}>{item}</li>);
  return (
    <div>
      <ul>{list}</ul>
      <div>每页{props.pageSize}</div>
    </div>
  );
};

// 给 List 组件接收的 colors 属性添加校验
List.propTypes = {
  //   colors: PropTypes.array, // 数组类型
  colors: PropTypes.array.isRequired, // 数组类型，还要是一个必填项
  // 性别属性
  gender: PropTypes.oneOf(['男', '女']), // 类型，只能是 '男'、'女' 这两个值之一
  pageSize: PropTypes.number,
};

// 给List组件添加具有默认值属性的 props
List.defaultProps = {
  pageSize: 10,
};

export class App extends Component {
  render() {
    // 小红使用小明创建的 List 组件
    return <List colors={[1, 2, 3]} gender={'男'} pageSize={20} />;
  }
}

export default App;
